<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点击发送ajax请求</button>
    <script>
      // 发送ajax请求的函数
      function myAjax(options) {
        // 1.判断使用者使用时,是否传递配置对象,如果没有传递,则直接return
        if (!options) return
        // 2. 解构options中的配置属性
        let {
          url,
          method = 'get', // 4. 如果没有传入method,则使用默认值'get'
          data,
          timeout,
          dataType,
          success,
          error,
          complete,
          beforeSend,
        } = options
        // 3. 判断是否传入了url.如果传入了url则继续执行,否则,return
        if (!url) return

        // 5. 创建xhr对象
        const xhr = new XMLHttpRequest()
        // 6. 设置请求方式和url地址
        // 6.1 先将用户传入的data(对象)的数据,拼接成一个键=值&键=值的字符串
        // obj2str的返回值有两种可能: 1. 拼接好的字符串 2. undefined
        const params = obj2str(data)
        //如果是get请求并且拼接完之后有参数,则拼接,否则不拼接
        if (type === 'get' && params) {
          xhr.open(method, url + '?' + params)
        } else {
          xhr.open(method, url)
        }

        // 7. 设置请求头
        if (method === 'post') {
          xhr.setRequestHeader(
            'content-type',
            'application/x-www-form-urlencoded'
          )
        }

        // 8. 设置请求主体,并发送请求
        if (method === 'post') {
          xhr.send(params)
        } else {
          xhr.send()
        }
      }

      // 将对象转成键值对的字符串的函数
      function obj2str(data) {
        // 如果没有data,就直接return
        // {name: 'zs', age: 18} ==> name=zs&age=18
        if (!data) return
        // 声明一个变量,用来存储拼接的字符串
        // 由于字符串不可变,所以直接拼接字符串,有产生大量无用的字符串
        // let str = ''
        // for (let key in data) {
        //   str += `${key}=${data[key]}&`
        // }

        // 推荐的拼接字符串的方式
        let arr = []
        for (let key in data) {
          arr.push(`${key}=${data[key]}`)
        }
        return arr.join('&')
      }

      obj2str({ name: 'zs', age: 18 })
    </script>
  </body>
</html>
